<%--
  Created by IntelliJ IDEA.
  User: Rui
  Date: 2018/10/16
  Time: 9:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String imgSrc = basePath + "resources/images/noImage.jpg";
    session.setAttribute("imgSrc", imgSrc);
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:useBean id="timestamp" class="java.util.Date"/>
<jsp:setProperty name="timestamp" property="time" value="${memberUser.memberUserDetails.birthday}"/>
<html style="background-color: #fff;">
<head>
    <meta charset="UTF-8">
    <title>UserInfo</title>
    <style type="text/css">
        .Content-Main {
            max-width: 500px;
            margin: auto;
            border: none;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            font-size: 13px;
            color: #444444;
            background: #ffffff;
        }

        .Content-Main h1 {
            padding: 8px 0px 40px 10px;
            display: block;

        }


        .Content-Main label > span {
            width: 20%;
            float: left;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
            font-weight: bold;
        }


    </style>
    <%@include file="../../../resources/inc/head.jsp" %>
</head>
<body>
<div class="layui-tab"lay-filter="tab">
    <ul class="layui-tab-title">
        <li class="layui-this">基本信息</li>
        <li>收货地址</li>
        <li>查看订单</li>
        <li>支付记录</li>
        <%--<li>账户明细</li>--%>
        <%--<li>等级关系</li>--%>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户ID:</label>
                    <div class="layui-input-block" >
                        <input type="text"   value="${memberUser.memberUserDetails.userId}"  autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号:</label>
                <div class="layui-input-block" >
                    <input type="text"   value="${memberUser.userName}"  autocomplete="off" class="layui-input" readonly>
                    </div>
            </div>
                <%--<div class="layui-form-item">--%>
                    <%--<label class="layui-form-label">头像:</label>--%>
                    <%--<div class="layui-input-block" ><img style="position: absolute ;top: 65px;" src="${memberUser.avatar==null?imgSrc:memberUser.avatar}"--%>
                         <%--width="70px" height="70px">--%>
                    <%--</div>--%>
                <%--</div>--%>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名:</label>
                <div  class="layui-input-block">
                    <input type="text" value="${memberUser.memberUserDetails.realName==null?'无':memberUser.memberUserDetails.realName}" required   autocomplete="off" class="layui-input" readonly>
                 </div>
            </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">安全问题:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.question==null?'无':memberUser.memberUserDetails.question}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">安全答案:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.answer==null?'无':memberUser.memberUserDetails.answer}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
            <div class="layui-form-item">
                <label class="layui-form-label">个性签名:</label>
                <div  class="layui-input-block">
                    <input type="text" value="${memberUser.memberUserDetails.signature==null?'无':memberUser.memberUserDetails.signature}" required   autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出生日期:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="<fmt:formatDate value="${timestamp}" pattern="yyyy-MM-dd"/>" required   autocomplete="off" class="layui-input" readonly>
                     </div>
                </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码:</label>
                <div  class="layui-input-block">
                    <input type="text"value="${memberUser.memberUserDetails.bindPhone=null?'无':memberUser.memberUserDetails.bindPhone}"  required   autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电子邮箱:</label>
                    <div  class="layui-input-block">
                        <input type="text"value="${memberUser.memberUserDetails.bindEmail==null?'无':memberUser.memberUserDetails.bindEmail}"  required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.gender!=0?'男':'女'}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">省:</label>
                    <div class="layui-input-inline" >
                        <input type="text" value="${memberUser.memberUserDetails.province==null?'无':memberUser.memberUserDetails.province}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                    <label class="layui-form-label">市:</label>
                    <div class="layui-input-inline" >
                        <input type="text" value="${memberUser.memberUserDetails.city==null?'无':memberUser.memberUserDetails.city}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                    <label class="layui-form-label">区/县:</label>
                    <div class="layui-input-inline" >
                        <input type="text" value="${memberUser.memberUserDetails.county==null?'无':memberUser.memberUserDetails.county}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <%--<div class="layui-form-item">--%>
                    <%--<label class="layui-form-label">市:</label>--%>
                    <%--<div class="layui-input-block" >--%>
                        <%--<input type="text" value="${memberUser.memberUserDetails.city==null?'无':memberUser.memberUserDetails.city}" required   autocomplete="off" class="layui-input" readonly>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="layui-form-item">--%>
                    <%--<label class="layui-form-label">区/县:</label>--%>
                    <%--<div class="layui-input-block" >--%>
                        <%--<input type="text" value="${memberUser.memberUserDetails.county==null?'无':memberUser.memberUserDetails.county}" required   autocomplete="off" class="layui-input" readonly>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.address==null?'无':memberUser.memberUserDetails.address}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">简介:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.introduction==null?'无':memberUser.memberUserDetails.introduction}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">QQ第三方登录:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.bindQq==null?'无':memberUser.memberUserDetails.bindQq}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >微信第三方登录:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.bindWechat==null?'无':memberUser.memberUserDetails.bindWechat}" required   autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">微博第三方登录:</label>
                    <div class="layui-input-block" >
                        <input type="text" value="${memberUser.memberUserDetails.bindSina==null?'无':memberUser.memberUserDetails.bindSina}" required   autocomplete="off" class="layui-input" readonly >
                    </div>
                </div>
                <%--<div class="layui-form-item">--%>
                    <%--<label class="layui-form-label">资金:</label>--%>
                    <%--<div class="layui-input-block" >                        <input type="text"value="${memberUser.memberUserSecurity.balance}"  required   autocomplete="off" class="layui-input">--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="layui-form-item">--%>
                    <%--<label class="layui-form-label">积分:</label>--%>
                    <%--<div class="layui-input-block" >                        <input type="text"value="${memberUser.memberUserSecurity.integral}"  required   autocomplete="off" class="layui-input"></div>--%>
                <%--</div>--%>
            </form>
        </div>
        <div class="layui-tab-item">
            <div class="layui-card-body">
                <table id="addressManage" lay-filter="addressManage"></table>
                <script type="text/html" id="gmtModifiedTpl">
                    {{#
                    var date = new Date();
                    date.setTime(d.gmtModified);
                    return date.Format("yyyy-MM-dd hh:mm:ss");
                    }}
                </script>
            </div>


        </div>
        <div class="layui-tab-item">
            <div class="layui-card-body">
                <table id="orderManage" lay-filter="orderManage"></table></div>
            <script type="text/html" id="orderStatus">
                {{
                d.orderStatus==0?'待付款':d.orderStatus==1?'已付款':d.orderStatus==2?'待发货':'已发货'
                }}
            </script>
            <script type="text/html" id="orderType">
                {{
                d.orderType==1?'抢购':d.orderType==2?'零售':'折扣'
                }}
            </script>
        </div>

        <div class="layui-tab-item">
            <div class="layui-card-body"><table id="orderPaymentManage" lay-filter="orderPaymentManage"></table>
            </div>
            <script type="text/html" id="investTotal">
               {{d.productOrderHeader.investTotal}}
            </script>
        </div>
        <div class="layui-tab-item">
            <div class="layui-card-body"><table id="changingHistoryManage" lay-filter="changingHistoryManage"></table>
            </div>
            <script type="text/html" id="userName">
                {{#

                return d.memberUser==null?'':d.memberUser.userName
                }}
            </script>
            <script type="text/html" id="operator">
                {{#

                return d.operator==0?'+':'-'
                }}
            </script>
            <script type="text/html" id="changingType">
                {{#

                return d.changingType==0?'余额':'积分'
                }}
            </script>
        </div>
        <div class="layui-tab-item" >
            <div id="mynetwork"></div>
            <script>

            </script>
        </div>
    </div>
</div>
</body>
<%@include file="../../../resources/inc/footer.jsp" %>
</body>
<script>
    var tagData = [];
    layui.config({
        base: '<%=basePath%>resources/lib/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块

    }).use(['index', 'jquery', 'table','element'], function () {
        var $ = layui.jquery
            , form = layui.form
            , table = layui.table
            , element = layui.element;
        var id="${memberUser.id}"

        element.on('tab(tab)', function(data){
            if(data.index==1){
                table.render({
                    elem: '#addressManage',
                    url: '<%=basePath%>manager/member/user/addressList/'+id+'.html',
                    // toolbar: '#optionToolbar',
                    cols: [[
                        {type: 'checkbox'},
                        {field: 'id', width: 50, title: 'ID', sort: true}
                        , {field: 'realName', title: '联系人姓名'}
                        , {field: 'area', title: '地区'}
                        , {field: 'address', title: '详细地址'}
                        , {field: 'phone', title: '联系人手机号'}
                        , {field: 'gmtModified', title: '更新时间', sort: true, templet: "#gmtModifiedTpl"}
                    ]],
                    page: !0,
                    limit: 10,
                    height: "full-130",
                    text: {none: "暂无此数据"},
                    response: {
                        statusCode: 200
                    }
                });
            } else if(data.index==2){
                table.render({
                    elem: '#orderManage',
                    url: '<%=basePath%>manager/product/orderHeader/list.html?userId='+id+'',
                    // toolbar: '#optionToolbar',
                    cols: [[
                        {type: 'checkbox'}
                        , {field: 'orderId', width: 100, title: '订单号', sort: true}
                        , {field: 'orderName',title: '订单名称' }
                        , {field: 'orderDate',title: '下单日期' ,templet: "#gmtModifiedTpl"}
                        , {field: 'realName',title: '用户名' }
                        , {field: 'productName',title: '产品名称' }
                        /*, {field: 'productImg', title: '商品图片',templet:"#productImg"}*/
                        , {field: 'orderStatus',title: '订单状态 ',templet: "#orderStatus"}
                        , {field: 'orderStatus',title: '订单类型 ',templet: "#orderType"}
                        , {field: 'phone',title: '电话 ' }
                        , {field: 'address',title: '地址 ' }
                        , {field: 'gmtModified', title: '更新时间', sort: true, templet: "#gmtModifiedTpl"}

                    ]],
                    page: !0,
                    limit: 10,
                    height: "full-130",
                    text: {none: "暂无此数据"},
                    response: {
                        statusCode: 200
                    }
                });
            }else if(data.index==3){
                table.render({
                    elem: '#orderPaymentManage',
                    url: '<%=basePath%>manager/product/orderPay/list.html?userId='+id+'',
                    cols: [[
                        {type: 'checkbox'}
                        , {field: 'orderId', width: 100, title: '订单号', sort: true}
                        , {field: 'subject',title: '交易概述' }
                        , {field: 'orderDate',title: '下单日期' ,templet: "#gmtModifiedTpl"}
                        , {field: 'investTotal',title: '花费金额' ,templet: "#investTotal"}
                        , {field: 'channelPayway',title: '支付方式' }
                        , {field: 'gmtModified', title: '更新时间', sort: true, templet: "#gmtModifiedTpl"}
                    ]],
                    page: !0,
                    limit: 10,
                    height: "full-130",
                    text: {none: "暂无此数据"},
                    response: {
                        statusCode: 200
                    }
                });
            }else if(data.index==4){
                table.render({
                    elem: '#changingHistoryManage',
                    url: '<%=basePath%>manager/member/changingHistory/list.html?userId='+id+'',
                    // toolbar: '#optionToolbar',
                    cols: [[
                        {type: 'checkbox'},
                        {field: 'id', width: 70, title: 'ID', sort: true}
                        , { title: '用户名',templet: "#userName"}
                        , {field: 'balance', title: '变化数据'}
                        , {field: 'operator', title: '操作符',templet: "#operator"}
                        , {field: 'describe', title: '描述'}
                        , {field: 'changingType', title: '类型',templet: "#changingType"}
                        , {title: '操作时间',templet: "#gmtModifiedTpl"}

                    ]],
                    page: !0,
                    limit: 10,
                    height: "full-130",
                    text: {none: "暂无此数据"},
                    response: {
                        statusCode: 200
                    }
                });
            }else if(data.index==5){
                draw();
            }
        });
    });


    <%--var nodes = '${level.memberLevels}';--%>
    <%--var edges = '${level.memberArrows}';--%>
    <%--nodes=JSON.parse(nodes)--%>
    <%--edges=JSON.parse(edges)--%>
    <%--var network = null;--%>
    function draw() {
        <%--$.ajax({--%>
            <%--url:"<%=basePath%>manager/member/user/rankLevel.action",--%>
            <%--type:"get",--%>
            <%--async:false,--%>
            <%--dataType:"JSON",--%>
            <%--success:function (data) {--%>
                <%--for(var i in data.memberLevels){--%>
                    <%--nodes.push({id:data.memberLevels[i].id,shape:'circularImage',image:data.memberLevels[i].image==null?'':data.memberLevels[i].image,label:data.memberLevels[i].label})--%>
                <%--}--%>
                <%--console.log(data.memberArrows);--%>
                <%--edges = data.memberArrows;--%>
            <%--}--%>
        <%--});--%>


        // create connections between people
        // value corresponds with the amount of contact between two people
        // edges = [
        //     {from: 1, to: 2,arrows:'to'},
        //     {from: 2, to: 3,arrows:'to'},
        //     {from: 2, to: 4,arrows:'to'},
        //     {from: 4, to: 5,arrows:'to'},
        //     {from: 4, to: 10,arrows:'to'},
        //     {from: 4, to: 6,arrows:'to'},
        //     {from: 6, to: 7,arrows:'to'},
        //     {from: 7, to: 8,arrows:'to'},
        //     {from: 8, to: 9,arrows:'to'},
        //     {from: 8, to: 10,arrows:'to'},
        //     {from: 10, to: 11},
        //     {from: 11, to: 12},
        //     {from: 12, to: 13},
        //     {from: 13, to: 14},
        //     {from: 9, to: 16}
        // ];

        // create a network
        var container = document.getElementById('mynetwork');
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {
            nodes: {
                borderWidth:4,
                size:30,
                color: {
                    border: '#ff5c5c',
                    background: '#666666'
                },
                font:{color:'#000'}
            },
            edges: {
                color: '#c8c8c8'
            }
        };
        network = new vis.Network(container, data, options);
    }
</script>

</html>
